<page-header></page-header>
<nz-card style="min-height: calc(100vh - 225px)">
  <form nz-form [formGroup]="searchForm" class="ant-advanced-search-form">
    <div class="row">
      <div class="col-1-5 col-1-5-md">
        <nz-form-item nzFlex>
          <nz-form-label nzFor="title">标题</nz-form-label>
          <nz-form-control class="flex2">
            <input nz-input formControlName="title" />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="col-1-5 col-1-5-md">
        <nz-form-item nzFlex>
          <nz-form-label nzFor="keyword">关键词</nz-form-label>
          <nz-form-control class="flex2">
            <input nz-input formControlName="keyword" />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="col-1-5 col-1-5-md">
        <nz-form-item nzFlex>
          <nz-form-label nzFor="createTime">发布时间</nz-form-label>
          <nz-form-control class="flex2">
            <nz-range-picker formControlName="createTime"></nz-range-picker>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div style="padding-left: 15px">
        <button nz-button nzType="primary" (click)="search()"><i nz-icon [nzIconfont]="'pets_search'"></i>查询</button>
        <button nz-button nzType="default" (click)="reset()"><i nz-icon [nzIconfont]="'pets_refresh'"></i>重置搜索</button>
        <button nz-button nzType="danger" (click)="add()"><i nz-icon [nzIconfont]="'pets_add'"></i>添加</button>
      </div>
    </div>
  </form>

  <div style="background-color: #fff6df78">
    <div style="display: inline-table; padding: 10px" *ngFor="let item of dataList">
      <nz-card nzHoverable [nzTitle]="item.title" class="box" [nzActions]="[actionEdit, actionDelete]">
        <p><span style="color: #ff000094; font-weight: 600; font-size: 17px">关键字</span>：{{ item.keyword }}</p>
        <p><span style="color: #0000ff7a; font-weight: 600; font-size: 17px">描述</span>：{{ item.description }}</p>
        <p><span style="color: #ff8d00c2; font-weight: 600; font-size: 17px">发布时间</span>：{{ item.createTime }}</p>
      </nz-card>
      <ng-template #actionEdit>
        <i nz-icon style="font-size: 28px" [nzIconfont]="'pets_edit'" (click)="edit(item)"></i>
      </ng-template>
      <ng-template #actionDelete>
        <a
          title="删除"
          class="line-remove"
          nz-popconfirm
          nzPopconfirmTitle="确认删除吗?"
          nzPopconfirmPlacement="top"
          (nzOnConfirm)="remove(item['id'])"
          ><i nz-icon style="font-size: 28px" [nzIconfont]="'pets_shanchu'"></i
        ></a>
      </ng-template>
    </div>
  </div>
</nz-card>
